一枚app圖標(biāo)的設(shè)計(jì)文化

啟動圖標(biāo)是每一個(gè)iOS中應(yīng)用軟件的關(guān)鍵組成部分。 它能傳達(dá)給你應(yīng)用程序的基礎(chǔ)信息，并能夠給用戶帶來第一印象感受。 它是一個(gè)非常重要的軟件入口，能直接引導(dǎo)用戶下載并使用應(yīng)用程序。它的重要性在這個(gè)智能手機(jī)時(shí)代被大家所認(rèn)知。

有過軟件啟動圖標(biāo)的設(shè)計(jì)經(jīng)驗(yàn)的設(shè)計(jì)師，經(jīng)常會遇到這樣一個(gè)問題： 設(shè)計(jì)出的單枚軟件啟動圖標(biāo)看起來很炫，但是放到電子市場上后，卻不太受用戶的喜愛，用戶點(diǎn)擊率很低。

怎樣從視覺設(shè)計(jì)的層面，去提升app軟件啟動的圖標(biāo)點(diǎn)擊率呢？
其實(shí)，我們在設(shè)計(jì)軟件啟動圖標(biāo)的過程中是有一定共性的設(shè)計(jì)方法的，這些能夠幫助我們提升圖標(biāo)的點(diǎn)擊率。

推薦閱讀：
《贊！15款A(yù)pp透視模型為你的設(shè)計(jì)演示錦上添花》
《品味移動設(shè)計(jì)：iOS、Android、Windows Phone用戶體驗(yàn)設(shè)計(jì)最佳實(shí)踐》
《88個(gè)音樂App的概念化界面設(shè)計(jì)欣賞》

1. 運(yùn)用視覺隱喻的同時(shí)，需要保證圖標(biāo)的可識別性

如圖一，這里很多圖標(biāo)設(shè)計(jì)是沒有經(jīng)過仔細(xì)思考而設(shè)計(jì)運(yùn)用的。我們通過App商店去查找，會發(fā)現(xiàn)有非常少的app圖標(biāo)的設(shè)計(jì)是吸引眼球的。 例如， “繞口令”的搜索，你會看到這樣的圖標(biāo)分類：

圖一的第一行第五個(gè)圖標(biāo)，表現(xiàn)方式是將繞口令的英文文字寫在漸變的圖標(biāo)背景色塊上，視覺效果表現(xiàn)很平，沒缺乏設(shè)計(jì)感。
為了吸引用戶去使用app軟件， 我們必須設(shè)計(jì)出吸引用戶眼球的圖標(biāo)！
我們可以運(yùn)用隱喻的設(shè)計(jì)表現(xiàn)手法，傳達(dá)給用戶“繞口令”的信息，讓用戶看到圖標(biāo)能夠感知、想象、理解圖標(biāo)的意思。圖一右側(cè)被放大的圖標(biāo)，在這幾種圖標(biāo)設(shè)計(jì)中，比較吸引用戶去使用。它的設(shè)計(jì)采用的就是隱喻的視覺表現(xiàn)手法，讓用戶理解繞口的含義，再加上有趣的形象設(shè)計(jì)，讓用戶容易理解圖標(biāo)的含義，這樣的精致隱喻的圖標(biāo)容易在第一時(shí)間吸引用戶的眼球，受用戶的喜愛。

如圖二，這是星巴克的一款應(yīng)用程序圖標(biāo)設(shè)計(jì)。星巴克的標(biāo)志設(shè)計(jì)是非常好的，但是，星巴克的消費(fèi)卡的app圖標(biāo)設(shè)計(jì)中星巴克的標(biāo)志比較小， 在App Store上看這枚圖標(biāo)設(shè)計(jì)，圈形的星巴克標(biāo)志是難以辨認(rèn)的。其實(shí)設(shè)計(jì)時(shí)，應(yīng)該放大星巴克的商標(biāo)，提高標(biāo)識的可識別。
因此，我們在使用視覺隱喻的手法去表現(xiàn)圖標(biāo)的同時(shí)，需要確保圖標(biāo)設(shè)計(jì)的識別性。

2．分析同類app圖標(biāo)，整理設(shè)計(jì)思路注重圖標(biāo)創(chuàng)新

我們在itunes里搜索效率軟件會發(fā)現(xiàn)很多相似的圖標(biāo)。如圖三所示，這里面哪些圖標(biāo)會吸引用戶的眼球呢？過目之后，我們會發(fā)現(xiàn)，那些有層次設(shè)計(jì)感、和特定質(zhì)感的精致圖標(biāo)會吸引用戶關(guān)注。
設(shè)計(jì)app圖標(biāo)的另一種方法是增加圖標(biāo)的層次感設(shè)計(jì)和質(zhì)感表現(xiàn)。設(shè)計(jì)好圖標(biāo)后，放在同類別app圖標(biāo)中，去審視自己設(shè)計(jì)的圖標(biāo)是否能夠抓住用戶的眼球。

下面是圖三中的幾個(gè)能夠第一時(shí)間抓住用戶眼球的圖標(biāo)：

2Do -這個(gè)圖標(biāo)就像一堆文件有序處理的感覺。縫制的皮革質(zhì)地和潔凈便條形成質(zhì)感的對比，圖標(biāo)整體質(zhì)感表現(xiàn)細(xì)膩飽滿。

Put Things Off -是一個(gè)很好設(shè)計(jì)。設(shè)計(jì)者經(jīng)過仔細(xì)的思考，表現(xiàn)方式與眾不同，富有創(chuàng)造性和趣味性。圖標(biāo)采用文件箱子和“前進(jìn)”的箭頭的視覺元素表現(xiàn)，表達(dá)事件處理的迅速效率的感覺；色彩上，運(yùn)用了純度很高的鮮亮的色彩去設(shè)計(jì)，能夠抓住了用戶的眼球，讓用戶很快的理解了這款軟件的功能特性。

Taska -圖標(biāo)看起來像一堆辦公桌整齊地堆放在一個(gè)文件。 視覺表現(xiàn)上沒有給人留下很深刻的印象，但是這個(gè)圖標(biāo)畫的非常精致，紙張的堆積效果表現(xiàn)出了圖標(biāo)的層次感，背景木材紋理的效果表現(xiàn)提升了圖標(biāo)設(shè)計(jì)的質(zhì)感。

3． 運(yùn)用軟件界面中的圖形元素，體現(xiàn)圖標(biāo)設(shè)計(jì)的連續(xù)性

有一種設(shè)計(jì)方法，可以確保圖標(biāo)的表現(xiàn)和軟件具有連續(xù)性。方法是啟動圖標(biāo)的設(shè)計(jì)運(yùn)用和應(yīng)用程序界面圖形相匹配的設(shè)計(jì)元素。 Expenditure是一個(gè)很好圖標(biāo)設(shè)計(jì)例子，非常準(zhǔn)確地描述了跟蹤功能的應(yīng)用程序。

4.采用用戶好奇的圖形元素設(shè)計(jì)，抓住用戶的好奇心

用高雅的輪廓、優(yōu)美的線條去表現(xiàn)一款瑜伽應(yīng)用程序圖標(biāo)。喚起用戶的好奇心，吸引用戶使用。

5.突出品牌，抓住用戶眼球

如果你正在設(shè)計(jì)一個(gè)知名品牌的應(yīng)用程序，請恰當(dāng)使用它的品牌LOGO！ 生活中，這些品牌標(biāo)志已經(jīng)留給用戶很深刻的印象，非常容易從眾多app的圖標(biāo)中勝出。因此，在設(shè)計(jì)知名品牌的app啟動圖標(biāo)時(shí)，應(yīng)該充分使用它的品牌LOGO。
不管你想設(shè)計(jì)成什么，不要浪費(fèi)了一個(gè)知名品牌的現(xiàn)有的元素！
例如，瀏覽幾個(gè)圖標(biāo)，是很容易被辨認(rèn)的：

但是，圖標(biāo)的設(shè)計(jì)中，如果你沒有突出知名品牌的元素，會是什么樣子呢？如圖六的圖標(biāo)設(shè)計(jì)，在圖七的眾多的app圖標(biāo)界面中，圖六的這些圖標(biāo)顯得很無力，無法與其他圖標(biāo)競爭。

如果，調(diào)整圖標(biāo)設(shè)計(jì)的局部，改進(jìn)設(shè)計(jì)：

我們把新的圖標(biāo)放在界面中，試看效果：

通過思考和實(shí)驗(yàn)，調(diào)整設(shè)計(jì)，讓品牌特性抓住用戶的眼球。

6. 設(shè)備測試預(yù)覽圖標(biāo)的效果，微調(diào)色彩或亮度達(dá)到最佳效果

采用在設(shè)備上測試你的圖標(biāo)設(shè)計(jì)，是一個(gè)很好的方法。

Photoshop里查看或者iphone模擬器里查看效果是不夠的。圖標(biāo)在實(shí)際設(shè)備上的視覺效果和電腦上是不同的。 為什么呢？ 有幾個(gè)原因：
電腦顯示器的色彩和亮度與觸摸屏移動設(shè)備不同。
并非所有的觸摸屏顯示器是一樣的。 例如， iPhone屏幕質(zhì)量高于iPod觸摸屏的顯示質(zhì)量。

因此，設(shè)備測試是很有必要的。

7．多場景測試，保證圖標(biāo)設(shè)計(jì)的上線質(zhì)量。

App的商店有：

?itunes電腦商店；
?iPhone 不同分辨率的商店；
?itouch 不同分辨率的商店；
iPad平板電腦商店。

這意味著圖標(biāo)的應(yīng)用環(huán)境有多種，因此在圖標(biāo)上線前，設(shè)計(jì)師需要在多種圖標(biāo)的應(yīng)用場景中進(jìn)行設(shè)計(jì)測試。盡可能做到在多種商店場景下，在同類產(chǎn)品的用戶查看界面，都能吸引用戶的眼球。

以上幾點(diǎn)app軟件圖標(biāo)設(shè)計(jì)的方法你在設(shè)計(jì)時(shí)都用到了么？沒用過的方法可以嘗試使用。
這些共性的圖標(biāo)設(shè)計(jì)方法能夠幫助設(shè)計(jì)師控制圖標(biāo)設(shè)計(jì)的效果和市場中的用戶體驗(yàn)，能真正的從用戶的角度去設(shè)計(jì)一枚圖標(biāo)，能提升你的app軟件的用戶體驗(yàn)，從視覺設(shè)計(jì)的角度去提升軟件圖標(biāo)的用戶點(diǎn)擊率。

原文地址：mobile.tutsplus
譯文地址：mux.baidu

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊：網(wǎng)頁設(shè)計(jì)師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計(jì)指南http://hao.uisdc.com/ps/。
設(shè)計(jì)微博：擁有粉絲量58萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：